.my-checkbox{

    display:none;

}

.my-checkbox+label{
    display:inline-block;
    height:20px;
    width:50px;
    border:1px solid #DDDDDD;
    border-radius: 10px;

    cursor:pointer;

    position: relative;/*相对于元素正常位置的定位*/

}
.my-checkbox+label>span{
    display:inline-block;
    height:20px;
    width:20px;
    background-color:#DDDDDD;
    border-radius:10px;

    /*
        absolute:相对于【设置了定位的】父元素定位
    */
    position:absolute;
    left:0;
    top:0;

    /* animation: mysecond 1s; */

    transition: left 2s;
   
}

@keyframes myfirst
{
from {left:0;}
to {left:30px;}
}

@keyframes mysecond
{
from {left:30px;}
to {left:0px;}
}

.my-checkbox:checked+label{
    border:1px solid #55EE55;
    background-color:#AAFFAA;
   
}

.my-checkbox:checked+label>span{
    left:30px;
    background-color:#55EE55;
    /* animation: myfirst 1s; */
}